<template>
  <div class="photoInfo-box">
      <!-- title -->
      <h3>{{ photoInfo.title }}</h3>
      <div class="photo-time">
          <span>发表时间: {{ photoInfo.add_time | dataFormat}}</span>
          <span>点击： {{photoInfo.click}}次</span>
      </div>
      <hr>
      <!-- 缩略图插件部分 -->
       <vue-preview :slides="slide1"></vue-preview>

      <!-- 缩略图叙述部分 -->
     <div class="content" v-html="photoInfo.content"></div>

      <!-- 发表评论子组件 -->
     <Comment :id = id></Comment>



      <h1>我是照片详情页组件</h1>
  </div>
</template>
<script>
//导入评论子组件
import Comment from '../subcomponents/Comment.vue' 

export default {
    data(){
        return {
           id: this.$route.params.id,
           photoInfo: {},//获取图片的对象
           slide1:[] //缩略图数组
        }
    },
    created(){
        this.getPhotoInfo();
        this.getSmallPhoto();
    },
    methods:{
        getPhotoInfo(){
          this.$http.get("api/getimageInfo/"+this.id).then(result => {
              if(result.body.status === 0){
                this.photoInfo = result.body.message[0];
              }
          });
        },
        // 获取缩略图函数
        getSmallPhoto(){
            this.$http.get("api/getthumimages/"+this.id).then(result => {
                if(result.body.status === 0){
                    result.body.message.forEach(item=>{
                        // 循环数组 给每项对象添加宽和高的属性
                        item.w = 300;
                        item.h = 300;
                        item.msrc = item.src
                    })
                    this.slide1 = result.body.message;
                }
            })
        }
    },
    components:{
        // 注册评论子组件
      Comment,
    }
}
</script>
<style lang="scss" scoped>
     .photoInfo-box {
         padding: 3px;
         h3 {
             font-size: 16px;
             text-align: center;
             color: skyblue;
             margin: 12px 0;
         }
         .photo-time {
             display: flex;
             justify-content: space-between;
             font-size: 14px;
         }
         .content {
             font-size: 14px;
             margin-bottom: 30px;
         }
         .my-gallery {
             a{
                 img {
                     height: 250px!important;
                 }
                 
             }
         }
     }
</style>

